<!--
 * @Author: coocase
 * @Date: 2021-03-12 11:41:40
 * @LastEditTime: 2021-04-17 19:55:34
 * @LastEditors: coocase
 * @Description: 订单管理
 * @FilePath: \git\dami\src\pages\account\orderManager.vue
-->
<template>
  <div>
      <pageHeader :menuName="menu"></pageHeader>
      <Table border :columns="columns" :data="this.pages.pageData">
        <!-- 在 columns 的某列声明 slot 后，就可以在 Table 的 slot 中使用 slot-scope。
        slot-scope 的参数有 3 个：当前行数据 row，当前列数据 column，当前行序号 index。 -->
        <template slot-scope="{ row }" slot="id">
            <strong>{{ row.id }}</strong>
        </template>
        <template slot-scope="{ index }" slot="action">
            
            <Button type="error" size="small" @click="remove(index)">Delete</Button>
        </template>
    </Table>
    <Page :total="pages.pageTotal" :page-size="pages.pageSize" @on-change="pageChange" :current="pages.pageNum"/>
  </div>
</template>

<script>
import PageHeader from './pageHeader'
export default {
    name:'Order',
    props: ['datas'],
    data:function(){
        return{
            menu:'orderManager',
            columns: [
                    {
                        title: '订单号',
                        slot: 'id',
                        width:150
                    },
                    {
                        title: '购买时间',
                        key: 'date',
                        width:120
                    },
                    {
                        title: '商品名称',
                        key: 'name',
                        width:170
                    },
                    {
                        title: '数量',
                        key: 'count'
                    },
                    {
                        title: '单价',
                        key: 'unitPrice'
                    },
                    {
                        title: '订单金额',
                        key: 'totalPrice',
                        width:'100px'
                    },
                    {
                        title: '状态',
                        key: 'state'
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 120,
                        align: 'center'
                    }
                ],
            //初始化页码信息
            pages:{
                    pageNum:1,
                    pageTotal:10,
                    pageSize:5,
                    pageData:[]
                },
                initialized:false
        }
    },
    components:{
        PageHeader
    },
    methods:{
        show (index) {
                this.$Modal.info({
                    title: 'User Info',
                    content: `Name：${this.pageData[index].name}<br>PhoneNumber：${this.pageData[index].phoneNumber}<br>Id：${this.pageData[index].id}`
                })
            },
            remove (index) {
                this.pages.pageData.splice(index, 1);
            },
            // //获得后台信息并初始化
            // pageInit(){
            //     //接受数据 处理
            //     var _pages = this.pages;
            //     var _datas = this.datas;
            //     _pages.pageNum = 1;
            //     _pages.pageTotal = _datas.length*5,
            //     // Array.from()  将一个类数组对象或者可遍历对象转换成一个真正的数组
            //     _pages.pageData = Array.from(_datas[0].datas);
            //     //处理后的数据赋值回去
            //     this.pages = _pages;
            //     this.initialized = true;
             
            // },
            //页码改变后信息改变
            pageChange(i){
                // Array.from()  将一个类数组对象或者可遍历对象转换成一个真正的数组
                //接受数据 
                var _pages = this.pages;
                var _pdatas = this.pages.pageData;
                var _datas = this.datas;

                //获取页面数据 处理
                 _pages.pageNum = i;
                 _pages.pageSize = _datas[i-1].datas.length;
                 _pdatas = Array.from(_datas[i-1].datas)
                 //计算每一页的金额
                 for(var j = 0;j<_datas[i-1].datas.length;j++){
                    _pdatas[j].totalPrice= _pdatas[j].count*_pdatas[j].unitPrice;
                    
                }
                //处理后的数据赋值回去
                this.pages = _pages;
                this.pages.pageData = _pdatas;
                this.initialized = true;
            },

            
    },
    beforeMount:function (){
       //此时的 this.datas 未定义
       //由于每次切换组件时,initialized 就变为false 所以mounted前要初始化一次，但是第一次mounted前datas 还未定义 所以还要判断是否是第一次进入，
       //****************打脸了，原因是获取数据是异步的所以第一次渲染时无数据的*********
       
    },
    mounted:function () {  
       if(!this.initialized){
           //分页初始化 即显示第一页
            this.pageChange(1);
       }
       
        // 此时的 this.datas 未定义，父组件异步传来的值为空，加了 v-if后即可
        
    },
    beforeUpdate:function(){
        //此时才有this.datas 在此时不能直接调用初始化，因为每次更新前都调用初始化 做一个判断
        //由于异步 所以在这才有数据 在父组件 判断有值在渲染即可
        
    },
    updated:function (){
        
    },
}
</script>

<style>

</style>